<div class="row ca-view">

    <div>
        <div class="container-fluid">
            <div class="iteration-change-btn text-standard-sm">
                <button id="next-btn" class="pull-right btn-default btn-xm active"
                        ng-click="caWidget.animateQualityView(true)"><i class="fa fa-fast-forward"></i></button>
                <button id="{{caWidget.pausePlaySymbol}}-btn" class="pull-right btn-default btn-xm active"
                        ng-click="caWidget.pauseQualityView()" ng-model="caWidget.pausePlaySymbol"><i
                        class="fa fa-{{caWidget.pausePlaySymbol}}"></i></button>
            </div>
            <ul class="nav nav-tabs">
                <li class="text-standard auth-modal-tab" ng-repeat="tab in caWidget.minitabs"
                    ng-click="caWidget.miniToggleView($index)"
                    ng-class="tab.name == caWidget.miniWidgetView ? 'active' : ''">
                    <a class="textColor-Performance" data-toggle="tab">{{tab.name}}</a>
                </li>
            </ul>
        </div>
        <div class="container-fluid" ng-if="caWidget.miniWidgetView == 'Static Analysis'">
            <div>
                <br>
                <div hide-empty="['{{ caWidget.issues[0].formattedValue }}', '{{ caWidget.qualityGate.value }}', '{{ caWidget.rulesCompliance.value }}', '{{ caWidget.technicalDebt.formattedValue }}']">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="widget">
                                <div class="widget-body">
                                    <div class="widget ca-issues">
                                        <br>
                                        <a ng-href="{{caWidget.reportUrl ? caWidget.reportUrl : ''}}" target="_blank" rel="noopener noreferrer">
                                        <span class="report-link pull-left">
                                            View All <i class="fa fa-arrow-right" aria-hidden="true"></i>
                                        </span>
                                        </a> <br>
                                        <!-- Blocker, Critical, Major Issues section -->
                                        <div class="widget-body">
                                            <table class="table">
                                                <tr class="dash-row"
                                                    ng-repeat="issue in caWidget.issues track by issue.name"
                                                    ng-class="{'clickable': !!issue.statusMessage}"
                                                    popover-html-unsafe="{{issue.statusMessage}}"
                                                    popover-trigger="focus"
                                                    popover-placement="left"
                                                    tabindex="0">
                                                    <td>
                                                    <span dash-status="{{ issue.status }}"
                                                          ng-if="caWidget.showStatusIcon(issue)"></span>
                                                    </td>
                                                    <td class="ca-name">{{issue.name}}</td>
                                                    <td class="ca-value">{{issue.formattedValue}}</td>
                                                </tr>
                                            </table>
                                        </div>
                                        <!-- Blocker, Critical, Major Issues section -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <!--Version, Quality gate, Technical debt section -->
                            <div class="widget">
                                <br>
                                <div class="widget-heading">
                                    Version {{ caWidget.versionNumber }}
                                </div>
                                <div class="widget-body">
                                    <div class="widget ca-version">
                                        <div class="widget-body">
                                            <div class="clearfix" fit-text=".ca-value span" fit-text-max="99px">
                                                <div ng-if="caWidget.showQualityGate" class="col-sm-6">
                                                    <div class="ca-value ca-status-{{ caWidget.qualityGate.value || 'OK'}}">
                                                <span ng-show="caWidget.qualityGate.value">
                                                    <span ng-if="caWidget.qualityGate.value ==='ERROR'"
                                                          class="fa fa-exclamation-triangle fa-3x widget-font-fail"></span>
                                                    <span ng-if="caWidget.qualityGate.value !=='ERROR'"
                                                          class="fa fa-check-square fa-3x widget-font-pass"></span>
                                                </span>
                                                    </div>
                                                    <div class="clearfix"></div>
                                                    <div class="ca-label">Quality<br/>Gate</div>
                                                </div>
                                                <div ng-if="!caWidget.showQualityGate" class="col-sm-6">
                                                    <div class="ca-value ca-status-{{ caWidget.rulesCompliance.status || 'Ok'}}"
                                                         ng-class="{'clickable': !!caWidget.rulesCompliance.statusMessage}"
                                                         popover-html-unsafe="{{caWidget.rulesCompliance.statusMessage}}"
                                                         popover-trigger="focus"
                                                         popover-placement="right"
                                                         tabindex="0">
                                                    <span ng-show="caWidget.rulesCompliance.value">
                                                    {{ caWidget.rulesCompliance.value | number:1 }}<small
                                                            class="percent">%</small>
                                                    </span>
                                                        <span ng-hide="caWidget.rulesCompliance.value">-</span>
                                                    </div>
                                                    <div class="clearfix"></div>
                                                    <div class="ca-label">Rules<br/>Compliance</div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="ca-value ca-status-{{ caWidget.technicalDebt.status || 'Ok'}}"
                                                         ng-class="{'clickable': !!caWidget.technicalDebt.statusMessage}"
                                                         popover-html-unsafe="{{caWidget.technicalDebt.statusMessage}}"
                                                         popover-trigger="focus"
                                                         popover-placement="right"
                                                         tabindex="0">
                                                        <span>{{ caWidget.technicalDebt.formattedValue }}</span>
                                                    </div>
                                                    <div class="clearfix"></div>
                                                    <div class="ca-label">Technical<br/>Debt</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--Version, Quality gate, Technical debt section -->
                        </div>
                    </div>
                </div>
                <div hide-empty="['{{ caWidget.unitTests[0].formattedValue }}', '{{ caWidget.linesofCode.value }}']">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="widget average-build-duration">
                                <!--Unit test section -->
                                <div class="widget-body">
                                    <div class="widget ca-tests">
                                        <div class="widget-heading">
                                            Unit tests
                                        </div>
                                        <div class="widget-body">
                                            <table class="table">
                                                <tr class="dash-row"
                                                    ng-repeat="test in caWidget.unitTests track by test.name"
                                                    ng-class="{'clickable': !!test.statusMessage}"
                                                    popover-html-unsafe="{{test.statusMessage}}"
                                                    popover-trigger="focus"
                                                    popover-placement="left"
                                                    tabindex="0">
                                                    <td><span dash-status="{{ test.status }}"
                                                              ng-if="caWidget.showStatusIcon(test)"></span></td>
                                                    <td class="ca-name">{{test.name}}</td>
                                                    <td class="ca-value">{{test.formattedValue}}</td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <!--Unit test section -->
                            </div>
                        </div>
                        <!--Code coverage section-->
                        <div class="col-md-6">
                            <div class="widget">
                                <div class="widget-body" fit-text=".build-summary-count > span" fit-text-max="40">
                                    <div class="widget ca-coverage">
                                        <div class="widget-heading">
                                            Code coverage
                                        </div>
                                        <div class="widget-body">
                                            <div guage-container>
                                                <div class="ct-wrapper clearfix"
                                                     ng-class="{'clickable': !!caWidget.lineCoverage.statusMessage}"
                                                     popover-html-unsafe="{{caWidget.lineCoverage.statusMessage}}"
                                                     popover-trigger="focus"
                                                     popover-placement="right"
                                                     tabindex="0">
                                                    <chartist
                                                            class="ct-chart ct-square db-chart-primary ct-chart-{{ caWidget.lineCoverage.status || 'Ok'}}"
                                                            chartist-data="caWidget.unitTestCoverageData"
                                                            chartist-chart-options="caWidget.pieOptions"
                                                            chartist-chart-type="Pie"></chartist>
                                                    <div class="guage-number">
                                                        <span fit-text>{{ caWidget.unitTestCoverageData.series[0] | number:0 }}<small
                                                                class="percent">%
                                                        </small></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="clearfix"></div>
                                            <div class="ca-value text-center">{{caWidget.linesofCode.value | number:0 }}
                                                lines of code
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Code coverage section-->
                    </div>
                </div>
            </div>
        </div>

        <!--Security scan tab-->
        <div class="container-fluid" ng-if="caWidget.miniWidgetView == 'Security'">
            <br>
            <div hide-empty="['{{ caWidget.securityIssues[0].formattedValue }}']">
                <div class="row">
                    <div class="col-xs-12"><br>
                        <div class="widget ca-security">
                            <div class="widget-body">
                                <table class="table" ng-if="caWidget.securityIssues.length > 0">
                                    <tr class="dash-row"
                                        ng-repeat="issue in caWidget.securityIssues track by issue.name"
                                        ng-class="{'clickable': !!issue.statusMessage}"
                                        popover-html-unsafe="{{issue.statusMessage}}"
                                        popover-trigger="focus"
                                        popover-placement="left"
                                        tabindex="0">
                                        <td>
                                            <span dash-status="{{ issue.status }}"
                                                  ng-if="caWidget.showStatusIcon(issue)"></span>
                                        </td>
                                        <td class="ca-name">{{issue.name}}</td>
                                        <td class="ca-value">{{issue.formattedValue}}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--Security scan tab-->

        <!--Open Source scan tab -->
        <div class="container-fluid" ng-if="caWidget.miniWidgetView == 'OpenSource'">
            <div class="row">
                <div class="col-xs-12"><br>
                    <div class="widget ca-tests" ng-if="caWidget.libraryPolicyDetails != null">
                        <div class="widget-body">
                            <div hide-empty="['{{ caWidget.knownComponentCount }}', '{{ caWidget.criticalCountPolicy }}']">
                                <div class="row" ng-if="caWidget.knownComponentCount || caWidget.criticalCountPolicy">
                                    <div class="col-sm-6">
                                        <div class="chartDimens">
                                            <chartist class="ct-chart ct-chart-donut ct-golden-section"
                                                      chartist-data="caWidget.donutData"
                                                      chartist-chart-type="Pie"
                                                      chartist-chart-options="caWidget.donutOptions">
                                            </chartist>
                                        </div>
                                        <div>
                                            <span class="compHeader">{{caWidget.knownComponentCount}} COMPONENTS IDENTIFIED</span>
                                            <span class="comSubHeader">{{caWidget.knownComponentCountPercentage}}% OF ALL COMPONENTS ARE IDENTIFIED</span>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="tableTdColum tdBgCol1">
                                            {{caWidget.criticalCountPolicy}}
                                        </div>
                                        <div class="tableTdColum tdBgCol2 tdMarginLeft">
                                            {{caWidget.severeCountPolicy}}
                                        </div>
                                        <div class="tableTdColum tdBgCol3 tdMarginLeft">
                                            {{caWidget.moderateCountPolicy}}
                                        </div>
                                        <div class="clrBoth">
                                            <span class="spanCol">POLICY ALERTS</span>
                                            <span class="comSubHeader">AFFECTING {{caWidget.policyAffectedCompCount}} COMPONENTS</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div hide-empty="['{{ caWidget.librarySecurityThreatCount }}', '{{ caWidget.libraryLicenseThreatCount }}']">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="dash-row clickable"
                                             ng-click="caWidget.showLibraryPolicyDetails('License', caWidget.libraryPolicyDetails)">
                                            License ({{ caWidget.libraryLicenseThreatCount ?
                                            caWidget.libraryLicenseThreatCount.total : 0 }})
                                            <small ng-if="caWidget.libraryLicenseThreatCount.total > 0"><i
                                                    class="fa fa-arrow-right" aria-hidden="true"></i></small>
                                        </div>
                                        <div class="dash-row">
                                            <div ng-repeat="(level, count) in caWidget.libraryLicenseThreatCount.counts"
                                                 ng-if="count > 0">
                                                <span dash-status="{{caWidget.getDashStatus(level)}}"></span> {{level}}
                                                ({{count}})
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="dash-row clickable"
                                             ng-click="caWidget.showLibraryPolicyDetails('Security', caWidget.libraryPolicyDetails)">
                                            Security ({{ caWidget.librarySecurityThreatCount ?
                                            caWidget.librarySecurityThreatCount.total : 0 }})
                                            <small ng-if="caWidget.librarySecurityThreatCount.total > 0"><i
                                                    class="fa fa-arrow-right" aria-hidden="true"></i></small>
                                        </div>
                                        <div class="dash-row">
                                            <div ng-repeat="(level, count) in caWidget.librarySecurityThreatCount.counts"
                                                 ng-if="count > 0">
                                                <span dash-status="{{caWidget.getDashStatus(level)}}"></span> {{level}}
                                                ({{count}})
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Open Source scan tab -->
                    </div>
                </div>
            </div>
        </div>
        <!-- Test Results tab-->
        <div class="container-fluid" ng-if="caWidget.miniWidgetView == 'Tests'">
            <br>
            <div hide-empty="['{{ caWidget.functionalTests[0] }}', '{{ caWidget.perfTests[0] }}']">

                    <test-list test-title="Functional" test-Data="caWidget.functionalTests"></test-list>

                    <test-list test-title="Performance" test-Data="caWidget.perfTests"></test-list>

            </div>
        </div>
        <!-- Test Results tab-->
    </div>
</div>
